<template>
	<view class="card-content" @click="clickCard">
		<image class="img" :src="imgSrc" mode=""></image>
		<view class="title">
			{{ title }}
		</view>
		<text>{{ num }}</text>
	</view>
</template>

<script>
	export default {
		name: 'CardContent',
		props: {
			title: String,
			num: Number
		},
		computed: {
			imgSrc() {
				if (this.title === '访客审批') {
					return require('@/static/images/index/fksp.png');
				} else if (this.title === '餐券申请') {
					return require('@/static/images/index/cqgl.png');
				} else if (this.title === '用车申请') {
					return require('@/static/images/index/clgl.png');
				} else if (this.title === '住房申请') {
					return require('@/static/images/index/zfsq.png');
				}
			}
		},
		methods: {	
			clickCard() {
				let url = '';
				switch(this.title) {
					case '访客审批':
						url = '/pages/visitorsapproval/approvalrecord';
						break;
					case '餐券申请':
						url = '/pages/mealTicket/mealTicket';
						break;
					case '用车申请':
						url = '/pages/useCar/useCar';
						break;
					case '住房申请':
						url = '/pages/house/house';
						break;
				}
				uni.navigateTo({
					url,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		height: 60px;
		padding: 0 30rpx;
		border-radius: 6rpx;
		
		color: $uni-text-color;
		background-color: rgba(255,255,255, .2);
		.img {
			width: 48rpx;
			height: 48rpx;
			margin-right: 40rpx;
		}
		.title {
			flex: 1;
			font-size: 14px;
		}
	}
</style>
